<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
    />
    <title>svg blend</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <div class="page">
      <svg width="100%" height="100%" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid meet">
        <defs>
          <filter id="BlendFilter-normal">
            <feFlood id="flood" result="floodFill" flood-color="green" flood-opacity="1" />
            <feBlend in="SourceGraphic" in2="floodFill" mode="normal" />
          </filter>
          <filter id="BlendFilter-multiply">
            <feFlood result="floodFill" flood-color="green" flood-opacity="1" />
            <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
          </filter>
          <filter id="BlendFilter-screen">
            <feFlood result="floodFill" flood-color="green" flood-opacity="1" />
            <feBlend in="SourceGraphic" in2="floodFill" mode="screen" />
          </filter>
          <filter id="BlendFilter-darken">
            <feFlood result="floodFill" flood-color="green" flood-opacity="1" />
            <feBlend in="SourceGraphic" in2="floodFill" mode="darken" />
          </filter>
          <filter id="BlendFilter-lighten">
            <feFlood result="floodFill" flood-color="green" flood-opacity="1" />
            <feBlend in="SourceGraphic" in2="floodFill" mode="lighten" />
          </filter>

          <image
            id="imageTeacher"
            xlink:href="./imgs/mj.jpg"
            x="30"
            y="0"
            width="200"
            height="200"
            preserveAspectRatio="xMidYMid meet"
          />
        </defs>
        <use xlink:href="#imageTeacher" transform="translate(0,0)" filter="url(#BlendFilter-normal)" />
        <use xlink:href="#imageTeacher" transform="translate(220,0)" filter="url(#BlendFilter-multiply)" />
        <use xlink:href="#imageTeacher" transform="translate(440,0)" filter="url(#BlendFilter-screen)" />
        <use xlink:href="#imageTeacher" transform="translate(660,0)" filter="url(#BlendFilter-darken)" />
        <use xlink:href="#imageTeacher" transform="translate(880,0)" filter="url(#BlendFilter-lighten)" />
      </svg>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
  </body>
</html>
